<template>
  <div class="Child">
    <vxe-toolbar>
      <template v-slot:buttons>
        <el-button type="primary" @click="findList()">查询</el-button>
        <el-button type="primary" @click="submitFunc">确定</el-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="selectDriverTable"
      border
      resizable
      height="500"
      :data="tableData"
      :radio-config="{highlight: true}"
      @cell-click="cellClickEvent"
      @radio-change="radioChangeEvent"
    >
      <vxe-table-column type="radio" width="60" />
      <vxe-table-column>
        <vxe-table-column field="name" title="司机姓名" min-width="130" />
        <template v-slot:header>
          <el-input v-model="listQuery.name" placeholder="" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="phone" title="司机手机号" min-width="130" />
        <template v-slot:header>
          <el-input v-model="listQuery.phone" placeholder="" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="linkMan" title="车队名称" min-width="100" />
        <template v-slot:header>
          <el-input v-model="listQuery.linkMan" placeholder="" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="vehicleLoadStatusName" title="负载状态" min-width="130" />
        <template v-slot:header>
          <el-select v-model="listQuery.vehicleLoadStatus" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="vehicleLicenseNumber" title="车牌号" min-width="130" />
        <template v-slot:header>
          <el-input v-model="listQuery.vehicleLicenseNumber" placeholder="" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="vehicleLengthName" title="车长" min-width="100" />
        <template v-slot:header>
          <el-input v-model="listQuery.vehicleLength" placeholder="" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column field="vehicleClassificationName" title="车型" min-width="100" />
        <template v-slot:header>
          <el-input v-model="listQuery.vehicleClassification" placeholder="" clearable />
        </template>
      </vxe-table-column>
    </vxe-table>

    <vxe-pager
      :loading="loading"
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import request from '@/utils/request'
export default {
  name: 'Child',
  data() {
    return {
      loading: false,
      url: '',
      tableData: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        sortField: '',
        sortType: '',
        total: 0,
        isFreeze: '0',
        authStatus: '3',
        driverType: '',
        isTeamSendDetail: '',
        name: '',
        phone: '',
        headImg: '',
        linkMan: '',
        vehicleLicenseNumber: '',
        vehicleLength: '',
        vehicleClassification: '',
        vehicleLoadStatus: ''
      },
      selectRecords: [],
      options: [
        {
          value: '0',
          label: '空载'
        },
        {
          value: '1',
          label: '负载'
        }
      ]
    }
  },
  created() {},
  methods: {
    init(params) {
      if (params.url) {
        this.url = params.url
      } else {
        this.$message({ message: '未传递访问接口！', type: 'error' })
        this.$emit('fatherCancelMethod')
      }
      if (params.isTeamSendDetail) {
        this.listQuery.isTeamSendDetail = params.isTeamSendDetail
      }
      if (params.driverType) {
        this.listQuery.driverType = params.driverType
      }
      this.findList()
    },
    findList() {
      this.loading = true
      request({
        url: `/arpa-basic-api/${this.url}`,
        method: 'get',
        params: this.listQuery
      }).then(response => {
        this.tableData = response.data.records
        this.listQuery.total = response.data.total
        this.loading = false
      })
    },
    cellClickEvent() {
    },
    radioChangeEvent({ checked, row }) {
      console.log(checked ? '勾选事件' : '取消事件')
    },
    submitFunc() {
      const row = this.$refs.selectDriverTable.getRadioRow()
      this.$emit('fatherSubmitMethod', { driverCode: row.partyCode, name: row.name, vehicleCode: row.vehicleCode })
    },
    // 分页handle
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage
      this.listQuery.pageSize = pageSize
      this.findList()
    }
  }
}
</script>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
 padding: 6px 0;
}
.vxe-toolbar{padding:0 0 10px 0}
</style>
